{% extends "base.html" %} {% block content %}
<html>
  <head>
    <style>
      td {
        overflow: hidden;
        white-space: nowrap;
        max-width: 100px;
        border: solid 1px #666;
      }
      /* Add a black background color to the top navigation bar */
      .topnav {
        overflow: hidden;
        background-color: #e9e9e9;
      }

      /* Style the links inside the navigation bar */
      .topnav a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }

      /* Change the color of links on hover */
      .topnav a:hover {
        background-color: #ddd;
        color: black;
      }

      /* Style the "active" element to highlight the current page */
      .topnav a.active {
        background-color: #2196f3;
        color: white;
      }

      /* Style the search box inside the navigation bar */
      .topnav input[type="text"] {
        float: right;
        padding: 6px;
        border: none;
        margin-top: 8px;
        margin-right: 16px;
        font-size: 17px;
      }

      /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
      @media screen and (max-width: 600px) {
        .topnav a,
        .topnav input[type="text"] {
          float: none;
          display: block;
          text-align: left;
          width: 100%;
          margin: 0;
          padding: 14px;
        }
        .topnav input[type="text"] {
          border: 1px solid #ccc;
        }
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        searchdom = document.getElementById("search");
        searchdom.addEventListener("keypress", logKey);
        function logKey(e) {
          if (e.key == "Enter") {
            window.location.href = "/topic?search="+searchdom.value
            // alert("/topic?search="+searchdom.value);
          }
        }
      };
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="topnav">
            <a>豆瓣租房爬虫(中介过滤)</a>
            <!-- <a href="#about">About</a> -->
            <!-- <a href="#contact">Contact</a> -->
            <input id="search" type="text" placeholder="Search.." />
          </div>
        </div>
        <div class="col-md-12">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>Id</th>
                <th>Title</th>
                <th>Description</th>
                <th>created</th>
                <th>Operations</th>
              </tr>
            </thead>
            <tbody>
              {% for entry in entries.items %}
              <tr>
                <td style="width: 30px">{{ entry.username }}</td>
                <td style="text-overflow: ellipsis"><a href="{{entry.alt}}" target="_blank">{{ entry.title }}</a></td>
                <td style="text-overflow: ellipsis">{{ entry.content }}</td>
                <td style="text-overflow: ellipsis">{{ entry.created }}</td>
                <td>
                  <!-- <a -->
                    <!-- class="{{ 'btn btn-success' if entry.status else 'btn btn-dark'}}" -->
                    <!-- href="/turn/{{ entry.id }}" -->
                  <!-- > -->
                    <!-- Turn Status -->
                  <!-- </a> -->
                  <a class="btn btn-danger" href="/delete?id={{ entry.id }}">
                    删除
                  </a>
                  <a class="btn btn-info" href="/disable?id={{ entry.uid }}">
                    拉黑
                  </a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

{% endblock %}
